<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>首页</title>
  <link rel="stylesheet" href="https://www.swiper.com.cn/package/css/swiper.min.css">


  <!-- <link rel="stylesheet" href="./css/base.css"> -->
  <link rel="stylesheet" href="./css/public.css">
  <link rel="stylesheet" href="./css/index.css">

</head>

<body>

  <div class="toplan">
    <div class="toplan2">
      <div class="toplan2_left">
        <div style="float: left;margin-top: 8px;">
          <p>嗨，女神欢迎来到
            <a href="./index.html">美丽说首页</a>
          </p>
        </div>
        <img src="http://pub.idqqimg.com/wpa/images/group.png" alt="">
      </div>
      <div class="toplan2_right">
        <a href="./res.html" class="btn " role="button">注册</a>
        <a href="./login.html" class="btn" role="button">登录</a>
        <a href="">微博登录</a>
        <a href="">QQ登录</a>
        <a href="">淘宝登录</a>
      </div>
    </div>
  </div>

  <!-- 搜索框以及一级导航 -->
  <div class="header">
    <div class="header1">
      <div class="logo">
        <a href="./index.html">
          <img src="http://www.nrgou.com/App/Tpl/Home/nrgou/Public/img/logo.png" alt="">
        </a>
      </div>
      <div class="search_right">
        <div class="sr1">
          <p>搜宝贝</p>
        </div>
        <form action="" class="search_form">
          <input class="sousuoka" type="text" placeholder="宝贝、专辑...">
          <input class="btn" type="submit">
        </form>
      </div>
    </div>
    <div class="header2">
      <div class="nav">
        <ul class="nav_list">
          <li><a href="" class="first">首页</a></li>
          <li><a href="">值得买</a></li>
          <li><a href="">9块9频道</a></li>
          <li><a href="">特卖专场</a></li>
          <li><a href="">聚划算</a></li>
          <li><a href="">连衣裙</a></li>
          <li><a href="">9.9包邮</a></li>
        </ul>
      </div>
    </div>
  </div>

  <!-- 一级导航导航一下 --中部内容区 -->
  <div class="main">
    <div class="main_nav">
      <ul>
        <li><a href="" class="first">全部</a></li>
        <li><a href="">爆款</a></li>
        <li><a href="">9.9包邮</a></li>
        <li><a href="">卫衣</a></li>
        <li><a href="">男装</a></li>
        <li><a href="">鞋包</a></li>
        <li><a href="">包包</a></li>
        <li><a href="">配饰</a></li>
        <li><a href="">家居</a></li>
        <li><a href="">美食</a></li>
        <li><a href="">美妆</a></li>
        <li><a href="">母婴</a></li>
        <li><a href="">数码家电</a></li>
      </ul>
    </div>

    <!-- 轮播图 -->
    <div class="lunbotu">
      <div class="lbt_text">
        <h2>美丽说</h2>
        <span>今日一折爆款(22:00结束)</span>
      </div>

      <!-- Swiper -->
      <div class="swiper-container my-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="deal">
              <div>
                <h2>
                  <a href="">安莉芳旗下芬狄诗女士纯色3/4厚杯光面小胸聚拢性感内衣文胸FB8226</a>
                </h2>
                <a href="">
                  <img
                    src="https://img.alicdn.com/tfscom/i2/247483/TB2omIGkxtmpuFjSZFqXXbHFpXa_!!247483.jpg_250x250.jpg"
                    alt="">
                </a>
                <div class="deal_down">
                  <h4>￥
                    <span>0.01</span>
                    <a href="">
                      <img src="http://www.nrgou.com/App/Tpl/Home/nrgou/Public/img/qiang.png" alt="">
                    </a>
                  </h4>
                  <h3>
                    <span class="sp1">喜欢数:9920</span>
                    <span class="sp2">
                      <span class="sp3">(9779)</span>
                      人已买
                    </span>
                  </h3>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="deal">
              <div>
                <h2>
                  <a href="">安莉芳旗下芬狄诗女士纯色3/4厚杯光面小胸聚拢性感内衣文胸FB8226</a>
                </h2>
                <a href="">
                  <img
                    src="https://img.alicdn.com/tfscom/i1/48760779/TB2JHz3nXXXXXbtXpXXXXXXXXXX_!!48760779.jpg_250x250.jpg"
                    alt="">
                </a>
                <div class="deal_down">
                  <h4>￥
                    <span>0.01</span>
                    <a href="">
                      <img src="http://www.nrgou.com/App/Tpl/Home/nrgou/Public/img/qiang.png" alt="">
                    </a>
                  </h4>
                  <h3>
                    <span class="sp1">喜欢数:9920</span>
                    <span class="sp2">
                      <span class="sp3">(9779)</span>
                      人已买
                    </span>
                  </h3>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="deal">
              <div>
                <h2>
                  <a href="">安莉芳旗下芬狄诗女士纯色3/4厚杯光面小胸聚拢性感内衣文胸FB8226</a>
                </h2>
                <a href="">
                  <img
                    src="https://img.alicdn.com/tfscom/i2/247483/TB2omIGkxtmpuFjSZFqXXbHFpXa_!!247483.jpg_250x250.jpg"
                    alt="">
                </a>
                <div class="deal_down">
                  <h4>￥
                    <span>0.01</span>
                    <a href="">
                      <img src="http://www.nrgou.com/App/Tpl/Home/nrgou/Public/img/qiang.png" alt="">
                    </a>
                  </h4>
                  <h3>
                    <span class="sp1">喜欢数:9920</span>
                    <span class="sp2">
                      <span class="sp3">(9779)</span>
                      人已买
                    </span>
                  </h3>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="deal">
              <div>
                <h2>
                  <a href="">安莉芳旗下芬狄诗女士纯色3/4厚杯光面小胸聚拢性感内衣文胸FB8226</a>
                </h2>
                <a href="">
                  <img
                    src="https://img.alicdn.com/tfscom/i1/48760779/TB2JHz3nXXXXXbtXpXXXXXXXXXX_!!48760779.jpg_250x250.jpg"
                    alt="">
                </a>
                <div class="deal_down">
                  <h4>￥
                    <span>0.01</span>
                    <a href="">
                      <img src="http://www.nrgou.com/App/Tpl/Home/nrgou/Public/img/qiang.png" alt="">
                    </a>
                  </h4>
                  <h3>
                    <span class="sp1">喜欢数:9920</span>
                    <span class="sp2">
                      <span class="sp3">(9779)</span>
                      人已买
                    </span>
                  </h3>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="deal">
              <div>
                <h2>
                  <a href="">安莉芳旗下芬狄诗女士纯色3/4厚杯光面小胸聚拢性感内衣文胸FB8226</a>
                </h2>
                <a href="">
                  <img
                    src="https://img.alicdn.com/tfscom/i2/247483/TB2omIGkxtmpuFjSZFqXXbHFpXa_!!247483.jpg_250x250.jpg"
                    alt="">
                </a>
                <div class="deal_down">
                  <h4>￥
                    <span>0.01</span>
                    <a href="">
                      <img src="http://www.nrgou.com/App/Tpl/Home/nrgou/Public/img/qiang.png" alt="">
                    </a>
                  </h4>
                  <h3>
                    <span class="sp1">喜欢数:9920</span>
                    <span class="sp2">
                      <span class="sp3">(9779)</span>
                      人已买
                    </span>
                  </h3>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="deal">
              <div>
                <h2>
                  <a href="">安莉芳旗下芬狄诗女士纯色3/4厚杯光面小胸聚拢性感内衣文胸FB8226</a>
                </h2>
                <a href="">
                  <img
                    src="https://img.alicdn.com/tfscom/i1/48760779/TB2JHz3nXXXXXbtXpXXXXXXXXXX_!!48760779.jpg_250x250.jpg"
                    alt="">
                </a>
                <div class="deal_down">
                  <h4>￥
                    <span>0.01</span>
                    <a href="">
                      <img src="http://www.nrgou.com/App/Tpl/Home/nrgou/Public/img/qiang.png" alt="">
                    </a>
                  </h4>
                  <h3>
                    <span class="sp1">喜欢数:9920</span>
                    <span class="sp2">
                      <span class="sp3">(9779)</span>
                      人已买
                    </span>
                  </h3>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <!-- Add Pagination -->
        <!-- <div class="swiper-pagination"></div> -->
      </div>
    </div>
    <div class="clear"></div>


    <!-- 精品促销 -->
    <div class="cuxiao">
      <span class="sp_left">精品促销</span>
      <span class="sp_right">
        <a href="">美丽说官网</a>&nbsp;|&nbsp;
        <a href="">高跟鞋</a>&nbsp;|&nbsp;
        <a href="">秋季女装新款</a>&nbsp;|&nbsp;
        <a href="">连身袜</a>&nbsp;|&nbsp;
        <a href="">牛仔裤</a>&nbsp;|&nbsp;
        <a href="">情侣装</a>&nbsp;|&nbsp;
        <a href="">美丽说首页</a>
      </span>
    </div>

    <!-- 商品列表 -->
    <div class="shoplist">

      <!-- <div class="slcard">
        <div class="title">
          <a href="">超大麋鹿头饰发箍仙女森系超仙发窟可爱仙美节日发饰铃铛毛球头箍</a>
        </div>
        <a href="">
          <img class="aimg"
            src="http://img.alicdn.com/bao/uploaded/i3/416578306/O1CN010ElQy62BECIEFoE1m_!!416578306.jpg_250x250.jpg"
            alt="">
        </a>
        <div class="slcard_down">
          <div class="pirce">
            ￥<span>9.80</span>
          </div>
          <div class="qiang">
            <a href="">
              <img src="http://www.nrgou.com/App/Tpl/Home/nrgou/Public/img/qiang.png" alt="">
            </a>
          </div>
          <div class="like">喜欢数: 9165</div>
          <div class="buy">
            <span>(9236)</span>人已买
          </div>
        </div>
      </div>
      <div class="slcard">
        <div class="title">
          <a href="">超大麋鹿头饰发箍仙女森系超仙发窟可爱仙美节日发饰铃铛毛球头箍</a>
        </div>
        <a href="">
          <img class="aimg"
            src="http://img.alicdn.com/bao/uploaded/i3/416578306/O1CN010ElQy62BECIEFoE1m_!!416578306.jpg_250x250.jpg"
            alt="">
        </a>
        <div class="slcard_down">
          <div class="pirce">
            ￥<span>9.80</span>
          </div>
          <div class="qiang">
            <a href="">
              <img src="http://www.nrgou.com/App/Tpl/Home/nrgou/Public/img/qiang.png" alt="">
            </a>
          </div>
          <div class="like">喜欢数: 9165</div>
          <div class="buy">
            <span>(9236)</span>人已买
          </div>
        </div>
      </div>
      <div class="slcard">
        <div class="title">
          <a href="">超大麋鹿头饰发箍仙女森系超仙发窟可爱仙美节日发饰铃铛毛球头箍</a>
        </div>
        <a href="">
          <img class="aimg"
            src="http://img.alicdn.com/bao/uploaded/i3/416578306/O1CN010ElQy62BECIEFoE1m_!!416578306.jpg_250x250.jpg"
            alt="">
        </a>
        <div class="slcard_down">
          <div class="pirce">
            ￥<span>9.80</span>
          </div>
          <div class="qiang">
            <a href="">
              <img src="http://www.nrgou.com/App/Tpl/Home/nrgou/Public/img/qiang.png" alt="">
            </a>
          </div>
          <div class="like">喜欢数: 9165</div>
          <div class="buy">
            <span>(9236)</span>人已买
          </div>
        </div>
      </div>
      <div class="slcard">
        <div class="title">
          <a href="">超大麋鹿头饰发箍仙女森系超仙发窟可爱仙美节日发饰铃铛毛球头箍</a>
        </div>
        <a href="">
          <img class="aimg"
            src="http://img.alicdn.com/bao/uploaded/i3/416578306/O1CN010ElQy62BECIEFoE1m_!!416578306.jpg_250x250.jpg"
            alt="">
        </a>
        <div class="slcard_down">
          <div class="pirce">
            ￥<span>9.80</span>
          </div>
          <div class="qiang">
            <a href="">
              <img src="http://www.nrgou.com/App/Tpl/Home/nrgou/Public/img/qiang.png" alt="">
            </a>
          </div>
          <div class="like">喜欢数: 9165</div>
          <div class="buy">
            <span>(9236)</span>人已买
          </div>
        </div>
      </div>
      <div class="slcard">
        <div class="title">
          <a href="">超大麋鹿头饰发箍仙女森系超仙发窟可爱仙美节日发饰铃铛毛球头箍</a>
        </div>
        <a href="">
          <img class="aimg"
            src="http://img.alicdn.com/bao/uploaded/i3/416578306/O1CN010ElQy62BECIEFoE1m_!!416578306.jpg_250x250.jpg"
            alt="">
        </a>
        <div class="slcard_down">
          <div class="pirce">
            ￥<span>9.80</span>
          </div>
          <div class="qiang">
            <a href="">
              <img src="http://www.nrgou.com/App/Tpl/Home/nrgou/Public/img/qiang.png" alt="">
            </a>
          </div>
          <div class="like">喜欢数: 9165</div>
          <div class="buy">
            <span>(9236)</span>人已买
          </div>
        </div>
      </div> -->


    </div>

  </div>

  <div class="clear"></div>
  <!-- 分页栏 -->
  <div id="pager" class="m-style M-box"></div>

  <!-- 结尾 -->
  <div class="footer">
    <div class="footer_left">
      <dl>
        <dt>美丽说帮助</dt>
        <dd><a href="">选购技巧</a></dd>
        <dd><a href="">免责声明</a></dd>
      </dl>
      <dl>
        <dt>商务合作</dt>
        <dd><a href="">商家合作</a></dd>
        <dd><a href="">服务条款</a></dd>
      </dl>
    </div>
    <div class="footer_img">
      <img src="http://www.nrgou.com/App/Tpl/Home/nrgou/Public/img/logo.png" alt="">
    </div>
    <div class="footer_right">
      <dl>
        <dt>关注我们</dt>
        <dd><a href="">新浪微博</a></dd>
        <dd><a href="">腾讯微博</a></dd>
      </dl>
      <dl>
        <dt>关于我们</dt>
        <dd><a href="">网站简介</a></dd>
        <dd><a href="">联系我们</a></dd>
      </dl>
    </div>
    <div class="footer_down">
      <a href="">美丽说官网</a>&nbsp;|&nbsp;
      <a href="">高跟鞋</a>&nbsp;|&nbsp;
      <a href="">秋季女装新款</a>&nbsp;|&nbsp;
      <a href="">连身袜</a>&nbsp;|&nbsp;
      <a href="">牛仔裤</a>&nbsp;|&nbsp;
      <a href="">情侣装</a>&nbsp;|&nbsp;
      <a href="">美丽说官网</a>&nbsp;|&nbsp;
      <a href="">高跟鞋</a>&nbsp;|&nbsp;
      <a href="">秋季女装新款</a>&nbsp;|&nbsp;
      <a href="">连身袜</a>&nbsp;|&nbsp;
      <a href="">牛仔裤</a>&nbsp;|&nbsp;
      <a href="">情侣装</a>&nbsp;|&nbsp;
      <a href="">美丽说官网</a>&nbsp;|&nbsp;
      <a href="">高跟鞋</a>&nbsp;|&nbsp;
      <a href="">秋季女装新款</a>&nbsp;|&nbsp;
      <a href="">连身袜</a>&nbsp;|&nbsp;
      <a href="">牛仔裤</a>&nbsp;|&nbsp;
      <a href="">情侣装</a>&nbsp;|&nbsp;
      <a href="">美丽说官网</a>&nbsp;|&nbsp;
      <a href="">高跟鞋</a>&nbsp;|&nbsp;
      <a href="">秋季女装新款</a>&nbsp;|&nbsp;
      <a href="">连身袜</a>&nbsp;|&nbsp;
      <a href="">牛仔裤</a>&nbsp;|&nbsp;
      <a href="">情侣装</a>&nbsp;|&nbsp;
    </div>
  </div>












</body>
<script src="./js/jquery-1.11.0.js"></script>

<!-- <script src="./js/jquery.min.js"></script>  -->
<!-- <script src="./js/jquery.pagination.min.js"></script> -->

<!-- 轮播图 -->
<script src="https://www.swiper.com.cn/package/js/swiper.min.js"></script>
<script>
  var mySwiper = new Swiper(".my-container", {
    slidesPerView: 5,
    spaceBetween: 30,
    // 无缝切换
    loop: true,
    // 左右按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    autoplay: true,
  })
  //鼠标覆盖停止自动切换
  mySwiper.el.onmouseover = function () {
    mySwiper.autoplay.stop();
  }

  //鼠标离开开始自动切换
  mySwiper.el.onmouseout = function () {
    mySwiper.autoplay.start();
  }
</script>

<!-- 分页栏 -->
<script>
  $('#pager').pagination({
    pageCount: 276,         // 分页条显示可见页码数量 ，默认值5
    current: 1,             // 当前页码,默认值1
    prevContent: '上一页',
    nextContent: '下一页',
    count: 7,               // 分页条显示可见页码数量 ，默认值5
    coping: true,
    keepShowPN: true,
    homePage: '首页',
    endPage: '末页',
    // jump: true,
    callback(n) {
      console.log(n)
      console.log(n.getCurrent())
    }
  })
</script>
<!-- 商品列表 -->
<script>
  //建议先给当前用户一部分商品，然后再去调用商品列表接口取商品数据
  // $.post("http://jx.xuzhixiang.top/ap/api/goods/goods-add.php", {
  //   pname: "毛呢短裙女秋冬2019新款韩版百搭学生格子半身裙高腰a字包臀冬裙",
  //   pprice: 24.99,
  //   pimg: "img/3.jpg",
  //   pdesc: "某某商品",
  //   uid: localStorage.getItem("uid")
  // }).then(data => {
  //   console.log(data);
  // });
  // 取商品
  $.get("http://jx.xuzhixiang.top/ap/api/productlist.php", {
    uid: localStorage.getItem("uid")
  }).then(data => {
    console.log(data); // 查询数据有哪些
    var str = "";
    for (var i = 0; i < data.data.length; i++) {
      str += `
          <div class="slcard">
            <div class="title">
              <a href="">${data.data[i].pname}</a>
            </div>
            <a href="detail.html?pid=${data.data[i].pid}">
              <img class="aimg"
                src="${data.data[i].pimg}"
                alt="">
            </a>
            <div class="slcard_down">
              <div class="pirce">
                ￥<span>${data.data[i].pprice}</span>
              </div>
              <div class="qiang">
                <a href="">
                  <img src="http://www.nrgou.com/App/Tpl/Home/nrgou/Public/img/qiang.png" alt="">
                </a>
              </div>
              <div class="like">喜欢数: 9165</div>
              <div class="buy">
                <span>(9236)</span>人已买
              </div>
            </div>
          </div> `;
    }
    $(".shoplist").html(str);
  });
</script>

</html>